<template>
  <div class="edit-pro">
    <!--    <div fz-16 center>编辑作品</div>-->
    <div ww3 auto>
      <el-page-header @back="goBack" content="获取授权证书">
      </el-page-header>
    </div>

    <div class="edit-form" flex auto ww3>

      <div class="edit-img">
        <el-image
            ww1
            :src="$url.fileUrl + info.videoImg"
            fit="cover"
        >
        </el-image>

      </div>

      <div class="edit-cont">

        <p fz-14 class="pro-bar">
          <span>素材编号：{{info.serialNumber}}</span>
          <span>订单编号：{{ info.orderNumber }}</span>
          <span>购买时间：{{ info.patTime }}</span>
        </p>

        <el-form :model="ruleForm"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="100px"
                 class="demo-ruleForm"
                 label-position="top"
        >
          <el-form-item label="标题">
            <el-input v-model="info.prodName" disabled></el-input>
          </el-form-item>

          <el-form-item label="授权主体">
            <el-input v-model="info.nickname" disabled></el-input>
          </el-form-item>


          <el-form-item label="授权类型">
            <el-input v-model="info.videoType == 1 ? '个人' : info.videoType == 2 ? '企业' : '企业plsh'" disabled></el-input>
          </el-form-item>

          <el-form-item label="被授权人姓名" prop="user">
            <el-input v-model="ruleForm.userName" placeholder="请输入姓名"></el-input>
          </el-form-item>


          <el-form-item label="身份证号码" prop="card">
            <el-input v-model="ruleForm.idcard"  placeholder="平台将严格保密个人信息，不会提供给任何人"></el-input>
          </el-form-item>

          <el-form-item class="submit-btn">
            <p  flex flex-c fz-14>
              <el-checkbox v-model="ruleForm.checked"></el-checkbox>
              &nbsp;已认可<a href="" target="_blank">授权规则</a>，并确认被授权主体信息正确
            </p>
            <el-button type="primary" @click="sure">提交</el-button>

          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import $http from "@/api/info/car"

export default {
  name: "EditPro",
  created() {
    this.id = this.$route.params.id
    this.init()
  },
  data() {
    return {
      info: {},
      id: '',
      prevArray: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'],

      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',

      },



      ruleForm: {
        name: '万圣节的南瓜',
        region: '逛地球（UID：1537548）',
        region2: '个人授权',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        user: '',
        checked: false
      },
      rules: {
        userName: [
          { required: true, message: '请填写被授权人真实姓名', trigger: 'blur' },
        ],
        idcard: [
          { required: true, message: '请填写身份证号码', trigger: 'blur' },
        ],
      }




    };
  },

  methods: {
    init() {
      $http.orderInfo(this.id).then(res => {
        this.info = res.data
      })
    },
    sure() {
      if(!this.ruleForm.checked) {
        return this.$message.error('请查看授权规则，并确认被授权主体信息正确')
      }

      this.$refs.ruleForm.validate(v => {
        if(!v) return;
        $http.authorizationSave({
          "userId": sessionStorage.getItem("userId"),
          "orderId": this.info.orderId,
          "userName": this.ruleForm.userName,
          "idcard": this.ruleForm.idcard
        }).then(res => {
          if(res.code === 0) {
            this.$message.success('操作成功')
            this.$router.back()
          }else{
            this.$message.error(res.msg)
          }
        })
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }

}
</script>

<style scoped>
.submit-btn >>> .el-button--primary{
  padding: 3% 28% !important;
}
.edit-form{
  margin-top: 2%;

}
.edit-img {
  width: 350px;
}
.edit-cont{
  width: 46%;
  margin-left: 5%;
}

.submit-btn{
  color: var(--color-black);
}
.submit-btn a{
  color: var(--green);
}


.pro-bar span{
  margin-right: 2%;
}
.tip{
  color: #606266;
  align-self: flex-start;
}
.tip:before{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e88342;
  margin-right: 10px;
}
.submit-btn >>> .el-form-item__content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.edit-price{
  flex: 0 0 24%;
  width: 24%;
  margin-top: 3%;
}
.pirce-input .el-form-item__content {
  display: flex; align-items: center;
}
.pirce-input .el-input{
  width: 50%; margin-right:4px;
}
.pirce-input >>> .el-input--mini .el-input__inner {
  height: 36px;
  line-height: 36px;

}
.edit-form >>> .el-form-item__label{
  padding: 0;
}
.auto-tip p{
  padding-bottom: 6px;
}

.edit-cont >>>.el-input.is-disabled .el-input__inner{
  color: #000;
}

@media screen and (max-width: 1300px){
  .edit-form{
    width: 90%;
  }
}
</style>
